<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>04_样式类名操作</title>
<!-- 样式类名操作：针对css3、添加、移除、切换的元素"类名" 操作
		addClass()     有参：1个参和多个参
		               语法：addclass("类名")				   
					  <p class="类名">
					  语法：addClass("类名")；
				 	<p class="类名1 类名2">
					  功能：匹配元素集合中所有元素
					  添加一个或者多个类名操作
					  理解：元素添加存在的样式
		removeClass() 功能：匹配元素集合中所有元素
					  移除一个或者多个类名操作
					  
		toggleClass()功能：如果元素有类名移除，没有则添加
		  
		  
		hasClass()	功能：检查匹配元素集合中是否包含指定类名返回值bool
-->
<!-- 要求：
1.jq引入
2.html:   div id="targetElement
    4个按钮   id="addClassBtn"
			id="removeClassBtn"
			id="toggleClassBtn"
			id="hasClassBtn"	
		div id="resultArea"
3.css:  .bgColor{  300*300   背景颜色随意}		
		.broders{  10个像素实践红色边框 倒角画圆		   
-->
<script src="../js/jquery-1.11.1.js"></script>
<style>
.bgColor{
	width: 300px;
	height: 300px;
	background: #ffff7f;
	}
.broders{
	border: 10px solid #aaaaff;
	border-radius: 50%;
}
</style>
	</head>
	<body>
		<div id="targetElement"></div>
		<button id="addClassBtn">添加类名</button>
		<button id="removeClassBtn">移除类名</button>
		<button id="toggleClassBtn">切换类名</button>
		<button id="hasClassBtn">检查类名是否存在</button>
		<div id="resultArea"></div>
		<script>
//1.点击  添加类名  按钮   添加效果【样式】 300*300  背景色红色
$("#addClassBtn").click(function(){
	//添加div样式
	$("#targetElement").addClass("bgColor broders");
	$("#resultArea").html("<h4>添加样式类名：bgColor</h4>")
});
	//2.点击  添加类名  按钮  添加效果 【样式】
	//  300*300  背景红色 圆  外层 10px黄色框
	//3.点击 移除类名 按钮 添加效果【样式】  300*300  背景色红色
$("#removeClassBtn").click(function(){
	$("#targetElement").removeClass("broders");
	$("#resultArea").html("<h4>添加样式类名：bgColor</h4>")
});	
//4.点击  切换类名  按钮  添加效果 【样式】	
//  300*300  背景红色 圆  外层 10px黄色框	
$("#toggleClassBtn").click(function(){
	$("#targetElement").toggleClass("broders");
	$("#resultArea").html("<h4>切换样式类名：broders</h4>")
});		
//5.点击  切换类名  按钮  添加效果 【样式】	
//去掉 300*300 背景色红色
$("#toggleClassBtn").click(function(){
	$("#targetElement").toggleClass("bgColor");
	$("#resultArea").html("<h4>切换样式类名：broders</h4>")
});		
//6.检查类名是否存在：
$("#hasClassBtn").click(function(){
	var hc=$("#targetElement").hasClass("broders");
	$("#resultArea").text("检查当前样式是否存在："+hc);
});		

		</script>
	</body>
</html>